import { WeaInputSearch, WeaLocaleProvider } from 'ecCom';
import {Button} from 'antd';
import classNames from 'classnames';
import {toJS} from 'mobx'
import { observer } from "mobx-react";
import AceEditorDialog from '../../../dialog/custom-formula-dialog';
const { getLabel } = WeaLocaleProvider;


@observer
export default class CusFormula extends React.Component {
    state = {
        selectedkey:'',
        filterFunction: [],
        filterValue: undefined
    }
    componentDidMount() {
        const { cusFormulaId } = this.props;
        this.setState({selectedkey:cusFormulaId})
    }


    onSearch = (value) => {
        const { designerStore } = this.props;
        const { formulaList } = designerStore.aceEditorStore;
        if (value) {
            const v = (value || '').toLowerCase();
            this.setState({
                filterFunction: formulaList.filter(e => e.describes.toLowerCase().indexOf(v) > -1 || e.name.toLowerCase().indexOf(v) > -1 ),
                filterValue: value
            })
        } else {
            this.setState({
                filterFunction: [],
                filterValue: undefined
            })
        }
    }


    render() {
        const { designerStore } = this.props;
        const { formulaList,deleteFormula,openAceEditor } = designerStore.aceEditorStore;
        const { selectedkey, filterFunction, filterValue } = this.state;
        const realFunctions = filterValue ? filterFunction : formulaList;
        const getLabelString = new Map([
            ['取消',  getLabel(31129,'取消')],
            ['保存', getLabel(30986,'保存')]
        ]);
        designerStore.aceEditorStore.setTitle(getLabel(502403,"自定义公式"));
        designerStore.aceEditorStore.setButtons(getLabelString);

        return (
            <div className="edc-excel-code-functions">
                <div style={{fontSize: '18px',margin:'16px'}}>{getLabel('502403', '自定义公式')}
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@igo16b`} onClick={openAceEditor} style={{height: '28px',float: 'right'}} type="primary" >{getLabel('506103','添加')}</Button>
                </div>
                <div className="search" >
                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@zsdt6o`} onChange={this.onSearch} placeholder={getLabel('520899','请输入自定义公式名或者描述')}></WeaInputSearch>
                </div>
                <div className="functions" >
                    {formulaList && <ul className={classNames({ open })}>
                        {realFunctions.map(item => {
                            return (<li className={classNames({ active: item.id === selectedkey })} onClick={() => this.onChange(item)} 
                                        onMouseEnter={() => this.onMouseEnter(item)} onMouseLeave={() => this.onMouseLeave(item)}>
                                        <div style={{height:'25px'}}>{item.name}</div>
                                        <p style={{height:'16px'}}>{item.describes}</p>
                                        <i id={`editIconId${item.id}`} class="icon-coms-edit" style={{display:'none',fontSize:'18px',float:'right',marginRight:'30px',marginTop:'-30px'}} onClick={()=>openAceEditor(item)} />
                                        <i id={`delIconId${item.id}`} class="icon-coms-shanchu" style={{display:'none',fontSize:'18px',float:'right',marginTop:'-30px'}} onClick={()=>deleteFormula(item)} />
                                    </li>)
                        })}
                    </ul>}
                </div>
            </div>
        )
    }
    
    onChange = (obj) => {
        this.setState({
            selectedkey: obj.id
        });
        const { onChange } = this.props;
        if (onChange) {
            onChange(obj);
        }
    }

    onMouseEnter = (item) => {
        const editDom = document.getElementById(`editIconId${item.id}`);
        const delDom = document.getElementById(`delIconId${item.id}`);
        if(editDom) editDom.style.display='block';
        if(delDom) delDom.style.display='block';
    }

    onMouseLeave = (item) => {
        const editDom = document.getElementById(`editIconId${item.id}`);
        const delDom = document.getElementById(`delIconId${item.id}`);
        if(editDom) editDom.style.display='none';
        if(delDom) delDom.style.display='none';
    }

}